<template>
  <button :class="['f-flex-align', {'z-on': isFocus, 'z-ds': disabled, 'z-mul': isMul, 'w-dropbox-option': !!context}]" @click="click"
    v-bind="html_attrs" :disabled="disabled">
    <div class="f-flex-1 f-line-1">
      <slot>{{text || value}}</slot>
    </div>
    <div v-if="isMul" :class="['w-option-checked', {'f-i f-i-check': isFocus}]"></div>
  </button>
</template>
<script>
  import $ from '../dfish.js'
  import WidgetBase from './WidgetBase.vue'

  export default {
    name: 'w-option',
    mixins: [WidgetBase],
    props: ['value', 'text', 'disabled'],
    methods: {
      click(e) {
        if (this.isMul) {
          let cv = $.array(this.$parent.context.val(), true)
          if (this.isFocus) $.lodash.pull(cv, this.value)
          else cv.push(this.value)
          this.$parent.context.val(cv)
        } else {
          let cv = this.isCnc && this.isFocus ? '' : this.value
          this.$parent.context.val(cv)
          this.$parent.close()
        }
      }
    },
    computed: {
      context() {
        return this.$parent.context
      },
      isFocus() {
        let c = this.context
        if (c) {
          let m = c.x.modelValue
            return Array.isArray(m) ? m.includes(this.value) : $.idsAny(m, this.value)
        }
      },
      isMul() {
        let c = this.context
        return c && c.x.multiple
      },
      isCnc() {
        let c = this.context
        return c && c.x.cancelable
      }
    }
  }
</script>

<style>
  .w-option {
    height: var(--w-option-height, 32px);
    padding: 0 10px;  
    box-sizing: border-box;
    text-align: left;
  }
  
  .w-dropbox-option.z-ds,
  .w-dropbox-option.z-ds:hover {
    background-color: #f9f9f9;
    color: #999;
  }
  
  .w-dropbox-option:hover {
    background-color: #f5faff;
  }

  .w-dropbox-option.z-on:not(.z-mul) {
    background-color: var(--w--focus-color);
    color: #fff;
  }

  .w-dropbox-option.z-on.z-mul {
    color: var(--w--focus-color);
  }

  .w-option-checked {
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .w-option.z-mul {
    padding-left: 13px;
  }

  .w-option-checked.f-i {
    border-color: var(--w--focus-color);
  }
</style>
